<template>
  <div class="app-container">
    <br />
    <el-form ref="form" :model="form" label-width="80px" label-position="top">
      <el-form-item label="封面">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :action="$store.getters['app/resourceUploadUrl']"
          :on-success="onCoverUploadSuccessHandler"
        >
          <img
            v-if="form.cover.fileId"
            :src="form.cover.fileId | getResourceUrl"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="名称">
        <el-input type="text" size="mini" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="编号">
        <el-input type="text" size="mini" v-model="form.code"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input type="textarea" v-model="form.description"></el-input>
      </el-form-item>
      <el-form-item label="默认大小">
        <el-row>
          <el-col :span="4">width：</el-col>
          <el-col :span="8">
            <el-input
              type="text"
              size="mini"
              v-model="(form.size || {}).width"
              placeholder="width"
            ></el-input>
          </el-col>
          <el-col :span="4">height：</el-col>
          <el-col :span="8">
            <el-input
              type="text"
              size="mini"
              v-model="(form.size || {}).height"
              placeholder="height"
            ></el-input>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="资源">
        <el-upload
          class="upload-demo"
          :action="$store.getters['app/resourceUploadUrl']"
          :show-file-list="false"
          multiple
          :on-success="onResourceUploadSuccessHandler"
        >
          <el-button size="small" type="primary" plain>上传资源</el-button>
        </el-upload>
        <br />
        <el-table
          v-loading="listLoading"
          :data="form.resources"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          size="mini"
        >
          <el-table-column align="center" label="操作" prop="order" width="95">
            <template slot-scope="scope">
              <el-button
                slot="reference"
                type="text"
                size="mini"
                @click="deleteResource(scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>

          <el-table-column label="FileName">
            <template slot-scope="scope">
              {{ scope.row.fileName }}
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item label="编码">
        <el-button
          type="primary"
          size="mini"
          @click="$refs.scriptEditForm.show('options')"
          >edit options</el-button
        >
        <el-button
          type="primary"
          size="mini"
          @click="$refs.scriptEditForm.show('head')"
          >edit head</el-button
        >
        <el-button
          type="primary"
          size="mini"
          @click="$refs.scriptEditForm.show('body')"
          >edit body</el-button
        >
        <br>
        <el-button
          type="primary"
          size="mini"
          @click="$refs.scriptEditForm.show('script')"
          >edit script</el-button
        >
        <!-- 编辑 form.headLinks -->
      </el-form-item>
    </el-form>
    <scriptEditForm v-model="form" ref="scriptEditForm"></scriptEditForm>
  </div>
</template>

<script>
import javascriptEditor from "@/components/javascriptEditor";
import resourceApi from "@/api/resource";

import scriptEditForm from "./scriptEditForm";

export default {
  components: { javascriptEditor, scriptEditForm },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    },
    getResourceUrl(fileId) {
      return resourceApi.getResourceUrl(fileId);
    }
  },
  props: {
    form: {
      default: () => {
        return {
          code: "",
          codes: "",
          cover: {
            fileId: "",
            fileName: ""
          },
          description: "",
          headLinks: "",
          bodyHtml: "",
          id: "",
          name: "",
          resources: [
            {
              fileId: "",
              fileName: ""
            }
          ],
          size: {
            height: 0,
            width: 0
          },
          updateTime: ""
        };
      }
    }
  },
  watch: {
    form(oldForm, newForm) {
      debugger;
    }
  },
  data() {
    return {
      codeEditor: {},

      loading: true,
      listLoading: true
    };
  },
  created() {
    this.listLoading = false;
  },
  mounted() {
    //this.loadCodeEditor();
  },
  methods: {
    goBack() {},
    loadData(data) {
      this.form = data;
    },

    onCoverUploadSuccessHandler(response, file, fileList) {
      debugger;
      let fileItem = response.data[0];

      if (!this.form.cover) this.$set(this.form, "cover", {});

      this.$set(this.form.cover, "fileId", fileItem.id);
      this.$set(this.form.cover, "fileName", fileItem.fileName);
    },
    onResourceUploadSuccessHandler(response, file, fileList) {
      debugger;
      let fileItem = response.data[0];
      if (!this.form.resources) this.$set(this.form, "resources", []);
      response.data.forEach(fileItem => {
        this.form.resources.push({
          fileId: fileItem.id,
          fileName: fileItem.fileName
        });
      });
    },
    deleteResource(index) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.form.resources.splice(index, 1);
      });
    },
    setBodyValue(value) {
      this.$refs.bodyEditor.setValue(value);
    },
    getBodyValue() {
      return this.$refs.bodyEditor.getValue();
    },
    setScriptValue(value) {
      this.$refs.javascriptEditor.setValue(value);
    },
    getScriptValue() {
      return this.$refs.javascriptEditor.getValue();
    }
  }
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 60px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.avatar {
  width: 60px;
  height: 40px;
  display: block;
}
.CodeMirror {
  height: 600px;
}
</style>
